<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
</head>
<body>
<nav class="navbar navbar-expand-lg shadow navbar-dark bg-dark sticky-top">
    <a class="navbar-brand" href="/">Nevergetme</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    标签
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdown" id="HeaderTagsLists">
                </div>
            </li>
            <li class="nav-item"><a class="nav-link" href="/statistics">统计数据</a></li>
            <li class="nav-item">
                <a class="nav-link" href="/editArticle" id="GoToWritePage">写博客</a>
            </li>
            <li class="nav-item"><a class="nav-link" href="/admin" id="GoToAdminPage">站点管理</a></li>
        </ul>
        <ul class="navbar-nav my-2 my-lg-0 mr-2" id="footerUser">
            <li class="nav-item">
                <a  class="btn btn-dark" href="/search" data-toggle="tooltip" data-placement="bottom" title="搜索"><img class="rounded"  th:src="@{/icon/search.svg}" style="height: 30px;width: 30px;"/></a>
                <button  class="btn btn-dark" data-toggle="tooltip" data-placement="bottom" title="登录" id="logInOrLogout" >登录</button>
                <a id="MessageIconShow" class="btn btn-dark" data-toggle="tooltip" data-placement="bottom" title="消息"><img class="rounded" id="MessageIcon" th:src="@{/icon/message.svg}" style="height: 30px;width: 30px;"/></a>
            </li>
            <li class="nav-item dropdown" id="UserLoginShowStatus">
                <a class="nav-link dropdown-toggle" href="#" id="LoginUserDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <img class="rounded" src="" id="LoginUserHeader" style="height: 30px;width: 30px;"/>
                </a>
                <div class="dropdown-menu dropdown-menu-right" aria-labelledby="LoginUserDropdown" id="LoginUserDropdownMenu">
                    <a class="dropdown-item" href="/my">我的主页</a>
                    <button class="dropdown-item" id="LoginUserLogout">注销</button>
                </div>
            </li>
        </ul>
    </div>
</nav>
<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle"
     aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalCenterTitle" style="color:black">LoginIn</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body" id="receiverShow" style="color:black">
                <form>
                    <div class="form-group">
                        <label for="LoginModalEmail">Email</label>
                        <input type="email" class="form-control" id="LoginModalEmail" placeholder="Email">
                        <div class="invalid-feedback">
                            请输入正确的Email
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="LoginModalPassword">Password</label>
                        <input type="password" class="form-control" id="LoginModalPassword" placeholder="password">
                        <div class="invalid-feedback">
                            密码长度不小于6，只能包含数字字母和标点符号
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <a id="LoginInFormMessage"></a>
                <button type="button" class="btn btn-secondary" id="GoToRegisterFromLogin">注册</button>
                <button type="button" class="btn btn-secondary" id="LoginInButton">LoginIn</button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="RegisterModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle"
     aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" style="color:black">注册</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body" style="color:black">
                <form>
                    <div class="form-group">
                        <label for="RegisterModalEmail">Email</label>
                        <input type="email" class="form-control" id="RegisterModalEmail" placeholder="Email">
                        <div class="invalid-feedback">
                            请输入正确的Email,不要使用被别人注册过的email
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="RegisterModalUserName">Username</label>
                        <input type="text" class="form-control" id="RegisterModalUserName">
                        <div class="invalid-feedback">
                            用户名长度小于10
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-group col-md-6">
                            <label for="RegisterModalPassword">Password</label>
                            <input type="password" class="form-control" id="RegisterModalPassword" placeholder="password">
                            <div class="invalid-feedback">
                                密码长度不小于6，只能包含数字字母和标点符号
                            </div>
                        </div>
                        <div class="form-group col-md-6">
                            <label for="RegisterModalRepeatPassword">Repeat Password</label>
                            <input type="password" class="form-control" id="RegisterModalRepeatPassword" placeholder="Password">
                            <div class="invalid-feedback">
                                请保持前后输入密码一致
                            </div>
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-group col-md-8">
                            <label for="RegisterModalAuthCode">验证码</label>
                            <input type="number" class="form-control" id="RegisterModalAuthCode">
                            <div class="invalid-feedback">
                                请输入验证码，验证码可能出现在垃圾箱中
                            </div>
                        </div>
                        <div class="form-group col-md-4">
                            <label for="RegisterModalGetAuthCode" style="color: #FFFFFF">验证码</label>
                            <button type="button" class="btn btn-secondary" id="RegisterModalGetAuthCode">获取验证码</button>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" id="RegisterModalButton">注册</button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade bd-example-modal-lg text-center" id="ImageShowModal" tabindex="-1" role="dialog"
     aria-hidden="true">
    <div class="modal-dialog modal-lg" style="display: inline-block; width: auto;height: auto">
        <div class="modal-content">
            <img src="" id="ImageShowContent">
        </div>
    </div>
</div>

</body>
</html>